<template>
    <div>
        <div id="app">
            <div class="add">
                编号:<input type="text" v-model="code">
                品牌名称:<input type="text" v-model="productName">
                <br>
                产品图片地址:<input type="text" v-model="imgSrc">

                价格:<input type="text" v-model="price">
                <input type="button" value="添加" @click="add">
            </div>

            <div class="add">
                品牌名称:<input type="text" placeholder="请输入搜索条件">
            </div>

            <div>
                <table class="tb">
                    <tr>
                        <th>
                            全选<input type="checkbox" v-model="allCheck" @change="allCheckChange">
                            <!-- allCheckChange是声明的方法  allCheck代表全选   @change是一个事件-->
                        </th>
                        <th>产品图片</th>
                        <th>编号</th>
                        <th>品牌名称</th>
                        <th>价格</th>
                        <th>数量</th>
                        <th>操作</th>
                    </tr>
                    <!-- 动态生成内容tr -->
                    <tr v-for="(item, index) of products" :key="item.id">
                        <td><input type="checkbox" v-model="checks" :value="item"> </td>
                        <!-- checkbox是在下面data中 声明的， 必须绑定一个value不然拿不到item的值，item就是每一个数据 -->
                        <td><img width="200" :src="item.imgSrc" alt=""></td>
                        <td>{{ item.code }}</td>
                        <td>{{ item.productName }}</td>
                        <td>{{ item.price }}</td>
                        <td>
                            <button>-</button>
                            &nbsp;
                            {{ item.count }}
                            &nbsp;
                            <button>+</button>
                        </td>
                        <td><button @click="del(index)">删除</button></td>
                        <!-- 给按钮绑定一个点击事件，方法写下面的methods中 -->

                    </tr>
                </table>

                <div class="add" style="text-align: center;">没有更多数据了</div>
                <h1 class="add" style="text-align: right;">总价格:{{}}</h1>
            </div>
        </div>
        <h1>{{ checks }}</h1>
        <!-- checks就是选中的内容 -->

    </div>
</template>

<script>
//table和 thead tbody tr td配套，ul一般套li ol也套li a标签里面不能套a标签

//功能
//1.根据数据将解构动态的创建
//2.增加
//3.删除
//4.全选
//5.反选
//6.数量
//7.总价计算
//写这些功能之前首先要把数据做好 
//后端给的数据 [{},{},{},{}]
//本地永久存储 核心思想：数据只要从本地获取就可以了
export default {
    computed:{
        total(){
            //js中如何处理小数运算精度丢失的问题，转成整数来计算，
            this.checks.reduce((total,item)=>{
                item.price*item.count
            },0)
        }
    },
    data() {
        return {//对象中的字段 产品图片 编号 产品名称 数量 价格 
            products: [//数据
                {
                    id: 1,
                    imgSrc: "https://img2.baidu.com/it/u=2490939159,251868101&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=750",
                    code: "1122",
                    productName: "玉洁的手",
                    count: "1",
                    price: "168"
                },
                {
                    id: 2,
                    imgSrc: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F17%2F1e%2F8c%2F171e8c1e6b6660af87006c41789fad4d.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670836660&t=ebd5e185bdbf10a11d32264f274525e8",
                    code: "1123",
                    productName: "玉洁的头",
                    count: "5",
                    price: "1699"
                },

            ],
            code: "",
            productName: "",
            imgSrc: "",
            price: "",
            //checks 选中的商品 设置这个是为了选中全选
            checks: [],
            //全选的值
            allCheck: false,
        }

    },
    watch: {//侦听
        //直接侦听数组就行了
        checks(newChecks) {
            console.log(newChecks)//勾选中的数据
            if(newChecks.length===this.products.length){//如果选中的数据的长度等于数据的长度时说明所有的商品已经全选了
                //所有的商品都被选中了，全选需要被勾起来
                this.allCheck=true;
            }else {
                this.allCheck=false
            }
        }
    },
    methods: {
        //全选box 他的勾选状态发生变化的时候，触发的事件回调
        allCheckChange() {
            console.log('allCheck')
            if (this.allCheck) {
                //所有商品都要被勾选
                this.checks = this.products
            } else {
                //取消勾选
                this.checks = []
            }
        },
        del(index) {
            console.log(index)
            //删除的逻辑 素组中通过splice方法去掉某一项就能删除了
            this.products.splice(index, 1)
        },
        add() {//这个是设置按钮添加的逻辑 添加的思路就是收集输入框的数据，然后添加到products素组中，数组就会多一项，数组多一项，视图就会多一项

            //非空校验
            if (!this.code || !this.imgSrc || !this.price || !this.productName) {//只要其中有一个没有输入就不能添加 这就是非空校验
                return
            }
            let obj = {
                id: Math.random().toString(32).substring(2),//随机生成的意思
                imgSrc: this.imgSrc,
                code: this.code,
                productName: this.productName,
                count: 1,
                price: this.price
            }
            //添加到数据数组中products
            this.products.push(obj)
        }
    }
}



</script>


<style scoped>
#app {
    width: 600px;
    margin: 10px auto;
}

.tb {
    border-collapse: collapse;
    width: 100%;
}

.tb th {
    background-color: #0094ff;
    color: white;
}

.tb td,
.tb th {
    padding: 5px;
    border: 1px solid black;
    text-align: center;
}

.add {
    padding: 5px;
    border: 1px solid black;
    margin-bottom: 10px;
}
</style>

   
    <!-- <script>
        //功能
        //1.根据数据将解构动态得创建
        //2增加
        //3删除
        //写功能之前首先要把数据做好   
        //以后后端返回得数据  [{id:xx,name:xx},{},{},{}]

        //key的作用
        //1.diff的时候，辨识节点的唯一性
        //2.提高diff的效率，没有key的时候，diff会尽可能的减少修改/复用同类型节点，有key的时候，节点重新排序，没有key的节点会被移出



        let vm=new  Vue({
            el:"#app",
            data:{
                code:"",
                productName:"",
                imgSrc:"",
                price:"",
                //对象中的字段 产品图片 编号 产品名称 数量 价格
                products:[{
                    id:1,
                    imgSrc:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.mp.itc.cn%2Fupload%2F20160620%2F3d94eb9c43f340578a5d77ca3f31aa22_th.jpeg&refer=http%3A%2F%2Fimg.mp.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669955341&t=4dde37fd1900c6b9f16efee0f0e0726a",
                    code:"1122",
                    productName:"玉洁的手",
                    count:1,
                    price:122
                },
                {
                    id:2,
                    imgSrc:"https://img2.baidu.com/it/u=4186293923,953618277&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=700",
                    code:"1123",
                    productName:"你的手指",
                    count:11,
                    price:100
                }
            ]
            },
            methods: {
                del(index){
                    console.log(index)
                    //删除的逻辑怎么写 数组中通过splice方法去掉某一项，就能删除了
                    this.products.splice(index,1)//点击删除的执行的代码
                },
                add(){
                    //非空校验
                    if(!this.code || !this.imgSrc || !this.price || !this.productName){
                        return
                    }
                    //添加的思路，收集输入框的数据，然后添加到products数组中，数组多一项，视图就会多一项
                    let obj={
                        id:Math.random().toString(32).substring(2),
                        imgSrc:this.imgSrc,
                        code:this.code,
                        productName:this.productName,
                        count:1,
                        price:this.price
                    }
                    //添加到数组中products
                    this.products.push(obj)
                }
            }
        })
    </script> -->




    
<!-- 
    export default {
        data(){
            return {
            code:"",
            productName:"",
            imgSrc:"",
            price:"",
            //对象中的字段 产品图片 编号 产品名称 数量 价格
            products:[{
                id:1,
                imgSrc:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.mp.itc.cn%2Fupload%2F20160620%2F3d94eb9c43f340578a5d77ca3f31aa22_th.jpeg&refer=http%3A%2F%2Fimg.mp.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669955341&t=4dde37fd1900c6b9f16efee0f0e0726a",
                code:"1122",
                productName:"玉洁的手",
                count:1,
                price:122
            },
            {
                id:2,
                imgSrc:"https://img2.baidu.com/it/u=4186293923,953618277&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=700",
                code:"1123",
                productName:"你的手指",
                count:11,
                price:100
            }
        ]
        }},
        methods: {
            del(index){
                console.log(index)
                //删除的逻辑怎么写 数组中通过splice方法去掉某一项，就能删除了
                this.products.splice(index,1)//点击删除的执行的代码
            },
            add(){
                //非空校验
                if(!this.code || !this.imgSrc || !this.price || !this.productName){
                    return
                }
                //添加的思路，收集输入框的数据，然后添加到products数组中，数组多一项，视图就会多一项
                let obj={
                    id:Math.random().toString(32).substring(2),
                    imgSrc:this.imgSrc,
                    code:this.code,
                    productName:this.productName,
                    count:1,
                    price:this.price
                }
                //添加到数组中products
                this.products.push(obj)
            }
        }
    
}
  -->

